<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">asdasdas</div>

    <div id="compa"></div>
    <hr>
    <template id="compTemp">
        <div>
            <p>组件内置的内存变量msg：{{ msg }}</p>
            <input type="text" v-model="msg">
            <h1 @click="print()">组件模板</h1>
        </div>
    </template>
    <hr>
</body>
<script>
    /*
        new Vue(options) options 定义构成vue实例时所需要的参数，el、template、data……
        Vue.extend(extendOptions) 定义是将来基于组件构造器创建实例时所需要模板参数，el、template、data……
        -> extendOptions 定义的参数 和 options 定义的参数一样(存在不一样定义参数)
    */
   var data = {
       msg:"默认值"
   }
    var CompA = Vue.extend({
        // 组件构成时，需要定义一个基于固定参数创建的被多次使用模板，
        // 所以 编译后 HTML 并不能固定的定义在页面
        // 因此 extend 定义时 el 属性不能使用
        // el:"#compa"
        // template:"<h1 @click='print()'>组件A的模板</h1>",
        // template : string|css 选择器
        //      template 会配合 H5 标签 <template> 进行使用
        template:"#compTemp",
        // data:function(){
        //     return data;
        // },
        data:function(){
            return {
                msg:"默认值"
            }
        },
        methods: {
            print(){
                console.log("组件");
            }
        },
    });
    var vm1 = new CompA();
    vm1.$mount();
    document.body.appendChild(vm1.$el);
    var vm2 = new CompA();
    vm2.$mount();
    document.body.appendChild(vm2.$el);
    var vm3 = new CompA();
    vm3.$mount();
    document.body.appendChild(vm3.$el);
    
    // var vm3 = new Vue({
    //     // el:"#app"
    //     template:"<p>asdas</p>"
    // })
    // // vm3.$mount("#app");
    // // vue实例空挂载
    // vm3.$mount();
    // window.document.body.appendChild(vm3.$el);


</script>
</html>